<template>
  <div class="grid-box">
    <dv-border-box-1>
      <div class="video-box">
        <video class="video-container" controls>
          <source src="/videos/video.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    </dv-border-box-1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000']
    }
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
  },
  beforeDestroy() {
    clearInterval(this.timing)
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
.grid-box {
  display: grid;
  height: 100%;
}
.dv-border-box-1 {
  width: 100%;
  height: 100%;
}
.video-box {
  width: 100%;
  height: 100%;
  padding: 2rem;
  display: grid;
  place-items: center;
}
.video-container {
  width: 60%; /* 设置视频宽度为父容器的80% */
  height: auto; /* 保持宽高比 */
}
</style>
